<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<label>姓名:</label>
			<input v-model="form.name"/>
			<br>
			<label>姓名:</label>
			<input v-model="form.obj.name"/>
			<div>
				<a>{{ form.obj.name }}</a>
			</div>
			<div>
				<a>{{ form.name }}</a>
			</div>
			<br>
			<button @click="pushArr">测试推数据</button>
			<button @click="deleteArr">测试删数据</button>
			<br>
			<div v-for="value in arr">
				<li>{{value}}</li>
			</div>
			<br>
			<div v-for="value in arr">
				{{name}}<li>{{value}}</li>
			</div>
			<button @click="isshowObj">消失</button>
			<div v-if="isshow">
				<a>显示</a>
			</div>
			
		
		</div>
		
		<button onclick="addTest()">点击</button>
		<button onclick="updateTest()">更新</button>
		<button onclick="deleteTest()">删除</button>
		<script src="js/xiong.js"></script>
		<script>
			var v={
				data(){
					return {
						 isshow:true,
						 num:0,
						 form:{
							 name:'姓名',
							 obj:{
								 name:'obj姓名'
							 }
						 },
						 name:'X.I.O',
						 arr:["item1","item2"]
					}
				},
				created(){
					this.testName();
				},
				method:{
					isshowObj(){
						this.isshow=false;
					},
					testName(){
						console.log('初始化')
					},
					pushArr(){
						this.arr.push('num'+this.num);
						this.num++;
					},
					deleteArr(){
						this.arr.splice(0,1);
						console.log(JSON.stringify(this.arr))
					}
				}
			}
			app.importData(v);
			app.init('app');
			
			
			
			const array = [1, 2, 3, 4];
			
			const handler = {
			  set: function(target, key, value) {
			    // 监听数组元素的修改
			    console.log(`修改了下标为 ${key} 的元素，新值为 ${value}`);
			    return Reflect.set(target, key, value);
			  },
			  deleteProperty: function(target, key) {
			    // 监听数组元素的删除
			    console.log(`删除了下标为 ${key} 的元素`);
			    return Reflect.deleteProperty(target, key);
			  },
			  apply: function(target, thisArg, args) {
			    // 监听数组的方法调用（如push、pop等），用以获取新增元素的下标
			    if (args[0] === 'push') {
			      const newElements = args[1];
			      console.log(`新增了 ${newElements.length} 个元素到数组，起始下标为 ${target.length}`);
			    }
				console.log('类型:'+args[0])
			    return Reflect.apply(target, thisArg, args);
			  }
			};
			
			const obj = {
			  name: 'John',
			  age: 25
			};
			
			const proxyArray = new Proxy(array, handler);
			
			function addTest(){
				proxyArray.push(4);
			}
			function updateTest(){
				proxyArray[3]=3;
			}
			function deleteTest(){
				proxyArray.splice(2,1);
			}
			
			const proxyObj = new Proxy(obj, handler);
		// 	function traverseObject(obj,parentKey = '') {
		// 	   for (var key in obj) {
		// 	      var currentKey = parentKey ? parentKey + '.' + key : key; // 记录当前键的层级
		// 	      if (Array.isArray(obj[key])) { // 检查是否为数组
		// 	        console.log("数组：" + currentKey);
		// 	        obj[key].forEach(function(element) {
		// 	          if (typeof element === 'object') { // 检查是否为对象
		// 	            traverseObject(element, currentKey); // 递归遍历子对象
		// 	          }
		// 	        });
		// 	      } else if (typeof obj[key] === 'object') { // 检查是否为对象
		// 	        console.log("对象：" + currentKey);
		// 	        traverseObject(obj[key], currentKey); // 递归遍历子对象
		// 	      }
		// 	    }
		// 	}
			
		// 	// 示例对象
		// 	var obj = {
		// 	  array1: [1, 2, 3],
		// 	  array2: [
		// 	    { name: '对象1', obj: { prop: '属性1' } },
		// 	    { name: '对象2', obj: { prop: '属性2' } }
		// 	  ],
		// 	  obj: {
		// 	    prop1: '属性1',
		// 	    prop2: '属性2',
		// 	    obj2: {
		// 	      prop3: '属性3',
		// 		  obj3:{
		// 			  name:'名字'
		// 		  }
		// 	    }
		// 	  }
		// 	};
			
		// 	// 遍历对象
		// 	traverseObject(obj);
			
			
		// 	function setValueByPath(obj, path, value) {
		// 	  var keys = path.split('.'); // 将路径字符串分割成键的数组
		// 	  var currentObj = obj;
			  
		// 	  for (var i = 0; i < keys.length - 1; i++) {
		// 	    var key = keys[i];
		// 	    if (!currentObj[key]) {
		// 	      currentObj[key] = {}; // 如果路径上的某个键不存在，则创建一个空对象
		// 	    }
		// 	    currentObj = currentObj[key]; // 更新当前对象
		// 	  }
			  
		// 	  var lastKey = keys[keys.length - 1];
		// 	  currentObj[lastKey] = value; // 给最后一个键设置值
		// 	}
			
		// setValueByPath(obj, 'obj.obj2.prop3', '名字');
		// console.log(JSON.stringify(obj))
		
		
		
			
			
		</script>
	</body>
</html>